{% extends "common/um_layout.html" %}
{% block content %}
    {% if data %}
        <div class="modify-wrap">
            <table class="table table-hover" style="text-align:center">
                <thead style="text-align:center">
                <tr>
                    <th style="text-align:center">Nickname</th>
                    <th style="text-align:center">Loginname</th>
                    <th style="text-align:center">Gneder</th>
                    <th style="text-align:center">Age</th>
                    <th style="text-align:center">Occupation</th>
                    <th style="text-align:center">Email</th>
                    <th style="text-align:center">status</th>
                    <th style="text-align:center">operation</th>
                </tr>
                </thead>
                <tbody>
                {% for item in data %}
                    <tr>
                        {% if item.id == spid %}
                            <td><input type="text" name="nickname" value="{{ item.nickname }}"></td>
                            <td>
                                <input type="text" readonly="readonly" name="login_name" value="{{ item.login_name }}">
                            </td>
                            <td style="width:100px">
                                <input type="text" name="gender" style="width:100px" list="gender-list" placeholder="{{ item.gender }}">
                                <datalist id="gender-list">
                                    <option>Male</option>
                                    <option>Female</option>
                                </datalist>
                            </td>
                            <td style="width:50px"><input type="text" style="width:50px" name="age"
                                                          value="{{ item.age }}"></td>
                            <td>
                                <input type="text" name="occupation" list="occupation-list"
                                       placeholder="{{ item.occupation }}">
                                <datalist id="occupation-list">
                                    <option>Student</option>
                                    <option>Teacher</option>
                                    <option>Engineer</option>
                                    <option>Researcher</option>
                                    <option>Doctor</option>
                                    <option>Policeman</option>
                                    <option>Others</option>
                                </datalist>
                            </td>
                            <td>
                                <input type="text" readonly="readonly" name="email" value="{{ item.email }}">
                            </td>
                            <td class="td-status" style="width:100px">
                                {% if item.status == 0 %}
                                    <input type="text" style="width:100px" name="use-power" list="use-list"
                                           placeholder="not using">
                                {% else %}
                                    <input type="text" style="width:100px" name="use-power" list="use-list"
                                           placeholder="using">
                                {% endif %}
                                <datalist id="use-list">
                                    <option>using</option>
                                    <option>not using</option>
                                </datalist>
                            </td>
                            <td>
                                <button class="label label-primary do-modify">
                                    commit
                                </button>
                            </td>
                        {% else %}
                            <td>{{ item.nickname }}</td>
                            <td>{{ item.login_name }}</td>
                            <td>{{ item.gender }}</td>
                            <td>{{ item.age }}</td>
                            <td>{{ item.occupation }}</td>
                            <td>{{ item.email }}</td>
                            <td class="td-status">
                                {% if item.status == 0 %}
                                    <span class="label label-danger">not using</span>
                                {% else %}
                                    <span class="label label-success">using</span>
                                {% endif %}
                            </td>
                            <td>
                                <a href="{{ buildUrl('userManager/modify')~'?id='~item.id }}">
                                    <span class="label label-primary">modify</span>
                                </a>
                                <a href="{{ buildUrl('userManager/delete')~'?id='~item.id }}">
                                    <span class="label label-danger">delete</span>
                                </a>
                            </td>
                        {% endif %}

                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}
    {% include "common/pagenation.html" %}
{% endblock %}
{% block js %}
    <script src="{{ buildStaticUrl("/js/user_manager/modify.js") }}"></script>
{% endblock %}